<template>
  <div class="tab-bar-item" @click="itemClick">
    <div class="typeColor">
      <slot name="icon"></slot>
    </div>
    <div :class="{ typeColor: isactived }">
      <slot name="title"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props:{
      path:String
  },
  data() {
    return {
      isactived: false,
    };
  },
  methods: {
      itemClick(){
          this.$router.replace(this.path)
      }
  },
};
</script>

<style>
.tab-bar-item {
  flex: 1;
  text-align: center;
  height: 49px;
}

.typeColor {
  color: red;
}
</style>